<template>
  <div>
    <el-card class="box-card">
      <CategorySelect
        @getCategoryId="getCategoryId"
        ref="category"
      ></CategorySelect>
    </el-card>
    <!-- 按钮 -->
    <el-card class="box-card">
      <div v-show="!isshow">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="margin-left: 20px; margin-bottom: 20px"
          @click="addInfo"
          :disabled="!id3"
          >添加</el-button
        >
        <!-- 表格 -->
        <el-table
          :data="categoryList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column type="index" label="序号" align="center" width="80">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名" width="150">
          </el-table-column>
          <el-table-column label="属性列表" prop="attrValueList">
            <template slot-scope="{ row }">
              <el-tag
                v-for="attr in row.attrValueList"
                :key="attr.id"
                effect="plain"
              >
                {{ attr.valueName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button
                icon="el-icon-edit"
                size="mini"
                type="primary"
                @click="showAttrList(row)"
                >修改</el-button
              >
              <el-button
                icon="el-icon-delete"
                size="mini"
                type="danger"
                @click="deleteAttrList(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="isshow">
        <el-form inline>
          <el-form-item label="属性名">
            <el-input
              type="text"
              placeholder="请输入属性名"
              v-model="formData.attrName"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addAttrValue"
          style="margin-bottom: 20px"
          :disabled="!formData.attrName.trim()"
          >添加属性值</el-button
        >
        <el-button @click="isshow = false">取消</el-button>
        <!-- 表格 -->
        <el-table
          :data="formData.attrValueList"
          style="width: 100%; margin-bottom: 20px"
          border
        >
          <el-table-column type="index" label="序号" align="center" width="80">
          </el-table-column>
          <el-table-column prop="valueName" label="属性值名称">
            <template slot-scope="{ row, $index }">
              <el-input
                :ref="$index"
                v-if="row.edit"
                type="text"
                v-model="row.valueName"
                size="mini"
                @blur="toView(row)"
                @keyup.native.enter="toView(row)"
              ></el-input>
              <span
                v-else
                style="display: block; widrh: 100%; height: 100%"
                @click="toEdit(row, $index)"
                >{{ row.valueName }}</span
              >
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <el-popconfirm
                :title="`是否确定删除${row.attrValue}`"
                @onConfirm="deleteValue($index)"
              >
                <el-button
                  type="danger"
                  size="mini"
                  slot="reference"
                  icon="el-icon-delete"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="saveAttrInfo" :disabled="!saveDisabled">保存</el-button>
        <el-button>取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Attr",
  data() {
    return {
      id1: "",
      id2: "",
      id3: "",
      categoryList: [],
      isshow: false,
      formData: {
        attrName: "",
        attrValueList: [],
      },
    };
  },
  computed:{
    saveDisabled(){
      return this.formData.attrName.trim()&&this.formData.attrValueList.length>0
    }
  },
  methods: {
    async getCategoryId({ lv, id }) {
      if (lv == 1) {
        console.log(lv, id);
        this.id1 = id;
        this.id2 = "";
        this.id3 = "";
        this.categoryList = [];
      } else if (lv == 2) {
        this.id2 = id;
        this.id3 = "";
        this.categoryList = [];
      } else {
        this.id3 = id;
        this.getCategoryList();
      }
    },
    // 获取数据
    async getCategoryList() {
      let result = await this.$api.attr.getCategory(
        this.id1,
        this.id2,
        this.id3
      );
      if (result.code == 200) {
        this.categoryList = result.data;
      }
    },
    // formData获取数据并展示
    showAttrList(attr) {
      this.formData = { ...attr };
      this.isshow = true;
    },
    
    addAttrValue() {
      this.formData.attrValueList.push({
        valueName: "",
        attrId: "",
        edit: true,
      });
      this.$nextTick(() => {
        this.$refs[this.formData.attrValueList.length - 1].focus();
      });
    },
    toView(attrValue) {
      if (!attrValue.valueName.trim().length) return;
      const Repeat =
        this.formData.attrValueList.filter(
          (val) => val.valueName === attrValue.valueName
        ).length === 2;
      if (Repeat) {
        this.$message.warning("请勿重复提交");
        attrValue.valueName = "";
        return;
      }
      attrValue.edit = false;
    },
    toEdit(attrValue, index) {
      if (!attrValue.hasOwnProperty("edit")) {
        this.$set(attrValue, "edit", true);
      } else {
        attrValue.edit = true;
      }
      this.$nextTick(() => {
        this.$refs[index].focus();
      });
    },
    deleteValue(index) {
      //splice方法
      this.formData.attrValueList.splice(index, 1);
    },
    async saveAttrInfo() {
      if (!this.formData.attrName.trim().length) return;
      this.formData.attrValueList = this.formData.attrValueList.filter(
        (item) => {
          delete item.edit;
          return item.valueName.trim();
        }
      );
      if (this.formData.attrValueList.length === 0) return;
      const result = await this.$api.attr.saveAttrInfo(this.formData);
      if (result.code != 200) {
        this.$message.error("操作失败");
        return;
      }
      this.$message.success("操作成功");
      this.isshow = false;
      this.getCategoryList();
    },
    addInfo() {
      this.isshow = true;
      this.formData = {
        attrName: "", // 平台属性的名字
        attrValueList: [], // 平台属性值对象数组
        categoryId: this.id3, // 三级分类的id
        categoryLevel: 3, // 三级
      };
    },
    async deleteAttrList(id) {
      let result = await this.$api.attr.deleteAttr(id);
      if (result.code == 200) {
        this.$message.success("删除成功");
        this.getCategoryList();
      } else {
        this.$message.error(result.message);
      }
    },
  },
  watch: {
    isshow(val) {
      this.$refs.category.erha = val;
    },
  },
  mounted() {},
};
</script>

<style scoped>
</style>